<template>
	<view class="rechangeRecord">
		<comHead :title="$t('grzx.czjl')" :isLeft="true" :isRight="false"></comHead>
		
		<view class="top">
			<!-- <image src="https://siha.vxmeng.com/static/my/wallet-bg.png" mode="widthFix"></image> -->
			<text>{{$t('grzx.sysd')}}</text>
			<view class="dou">
				<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
				<text>{{parseInt(userinfo.money)}}</text>
			</view>
		</view>
		
		<view class="titBtn">
			<view class="item" @click="toggleList(1)" :class="active==1?'on':''">{{$t('grzx.qbjy')}}</view>
			<view class="item" @click="toggleList(2)" :class="active==2?'on':''">{{$t('grzx.czsj')}}</view>
			
			<view class="picker">
				<picker :value="index" :range="pickerList" @change="pickerChange">
					<view>{{pickerList[index]}}</view>
				</picker>
			</view>
		</view>
		
		<view class="content">
			<view class="list" v-for="item in userRecharge">
				<!-- <view class="days">{{item.time}}</view>
				<view class="item" v-for="order_item in item.list">
					<view class="t">
						<text>{{order_item.playTit}}</text>
						<text class="dou">{{order_item.dou}}嘶豆</text>
					</view>
					<view class="bot">
						<text>{{order_item.type}}</text>
						<text>订单编号：{{order_item.id}}</text>
					</view>
				</view> -->
				<view class="item">
					<view class="t">
						<text v-if="active==2">{{$t('index.wx')}}-{{$t('grzx.wxzf')}}</text>
						<text v-else>{{item.memo}}</text>
						<text v-if="active==2" class="dou">￥{{item.money}}</text>
						<text v-else class="dou">{{parseInt(item.money)}}{{$t('index.sidou')}}</text>
					</view>
					<view class="bot">
						<text>{{item.create_time}}</text>
						<text v-if="item.order_no">{{$t('index.ddbh')}}：{{item.order_no || ""}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				index: 0,
				pickerList: [this.$t('grzx.qb'),this.$t('grzx.zjyn'),this.$t('grzx.zjyy')],
				userinfo: {},
				userRecharge:[],
				record: []
			}
		},
		onLoad(){
			this.getUserinfo()
			this.getList(1)
		},
		methods: {
			pickerChange(e){
				this.index = e.detail.value
				this.getList(this.active)
			},
			toggleList(n){
				if(this.active != n){
					this.userRecharge = []
				}
				this.active = n
				this.getList(n)
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			async getList(e) {
				const res = await this.$myRequest({
					url: e==2?'api/user/getUserRecharge':'api/user/getUserMoneyLog',
					data: {
						type:this.index+1,
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.userRecharge = res.data.list
					if(e==2){
						this.userRecharge = this.userRecharge.filter(item=>item.status==2)
						console.log(this.userRecharge);
					}
				}
			},
		}
	}
</script>

<style lang="less" scoped>
  .rechangeRecord{
		height: 100vh;
		overflow: auto;
	  color: #fff;
	  .top{
		  height: 330rpx;
		  position: relative;
		  padding: 60rpx 100rpx;
			background: url('https://siha.vxmeng.com/static/my/wallet-bg.png') no-repeat center/100%;
			>text{
				font-size: 28rpx;
			}
		  >image{
			  width: 100%;
			  position: absolute;
			  top: 0;
			  left: 0;
			  z-index: -1;
		  }
	 	  .dou{
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  margin-top: 20rpx;
			  font-size: 72rpx;
			  image{
				  width: 66rpx;
				  margin-right: 20rpx;
			  }
		  }
	  }
		.titBtn{
			display: flex;
			padding: 0 30rpx;
			height: 60rpx;
			align-items: center;
			position: relative;
			.item{
				margin-right: 30rpx;
				color: #D8D8D8;
				font-size: 32rpx;
				&.on{
					color: #fff;
					position: relative;
					&::after{
						content: "";
						width: 40rpx;
						border: 3rpx solid #D8D8D8;
						position: absolute;
						bottom: -16rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
			.picker{
				position: absolute;
				top: 10rpx;
				right: 30rpx;
				view{
					height: 40rpx;
					font-size: 28rpx;
					background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
				}
			}
		}
		.content{
			padding: 0 30rpx;
			width: 100%;
			height: calc(100vh - 650rpx);
			overflow: auto;
			.list{
				margin-bottom: 20rpx;
				.days{
					font-size: 28rpx;
					color: #7B7B7B;
					padding: 20rpx 0;
				}
				.item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin-top: 20rpx;
					padding: 20rpx 0;
					width: 100%;
					border-bottom: 2rpx solid rgba(#fff,0.1);
					.t{
						width: 100%;
						margin-bottom: 10rpx;
						font-size: 30rpx;
						display: flex;
						justify-content: space-between;
						text:nth-child(1){
							display: inline-flex;
							width: 70%;
						}
						.dou{
							position: relative;
							top: 20rpx;
						}
					}
					.bot{
						font-size: 24rpx;
						color: #999999;
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							margin-right: 10rpx;
						}
					}
				}
			}
		}
  }
</style>
